<template>
	<view v-if="showPdf" >
		<web-view :src="pdfUrl"></web-view>
	</view>
	<view v-else class="container">
		<view class="title align-center justify-center">
			
		</view>

		<view class="box  ft15 line18">
			<view class="tabs align-center justify-between">
				<view class="active">
					证书查询验真
				</view>

			</view>
			<view class="plr15 pt10">
				<view class="align-center mb10">
					<view class="gray61 mr5">
						证 书 编 号:
					</view>
					<view class="">
						{{dataInfo.certificateNum}}
					</view>
				</view>
				<view class="align-start mb10">
					<view class="gray61 mr5">
						证 书 单 位:
					</view>
					<view class="clamp3" style="width: 450rpx;">
						{{dataInfo.entrustCompanyName}}
					</view>
				</view>
				<!-- <view class="align-center mb10">
					<view class="gray61 mr5">
						委 托 单 号:
					</view> 
					<view class="">
						{{dataInfo.certificateNum}}
					</view>
				</view> -->
				<view class="align-center mb10">
					<view class="gray61 mr5">
						设 备 编 号:
					</view>
					<view class="">
						{{dataInfo.instruNum}}
					</view>
				</view>
				<view class="align-center mb10">
					<view class="gray61 mr5">
						出 厂 编 号:
					</view>
					<view class="">
						{{dataInfo.factoryNum}}
					</view>
				</view>
				<view class="align-center mb10">
					<view class="gray61 mr5">
						校 准 日 期:
					</view>
					<view class="">
						{{dataInfo.calData}}
					</view>
				</view>
				<view class="align-center mb10">
					<view class="gray61 mr5">
						证书验证码:
					</view>
					<view class="">
						<uv-input v-model="cerCode" placeholder="请输入"></uv-input>
					</view>
				</view>

				<view class="align-center mb10">
					<view class="gray61 mr5">
						图片验证码:
					</view>
					<view class="align-center">
						<uv-input v-model="code" style="width: 200rpx;" placeholder="请输入"></uv-input>
						<image @click="refreshPic" style="width: 200rpx;height: 100rpx;" :src="validPic"
							mode="aspectFit"></image>
					</view>
				</view>
				<view class="submit" @click="submit">
					查询
				</view>

				<view class="gray6 ft14 " style="text-align: center;">
					<text style="color: #cc0000;" class="ft13">*请校对证书上的信息是否与以下内容一致</text>
					<br />
					点击[查询],查看证书封面
				</view>
			</view>
			
		</view>
		<view class="gzhCode justify-center flex">
			
		</view>
		<view class="mt12" style="text-align: center;color: #999; ">
			长按关注公众号
		</view>
		<view class="mt10 pb10 " style="text-align: center;color: #999; ">
			版权所有：方圆检测认证集团有限公司
		</view>
		<uv-popup ref="popup" :close-on-click-overlay="false" mode="center" round="15">
			<view class="align-center justify-center ft18 "
				style="height: 300rpx;width: 400rpx;text-align: center;color: #666;">
				合格证信息有误，
				<br />
				请重新扫描
			</view>
		</uv-popup>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		components: {

		},
		data() {
			return {
				act: 0,
				dataInfo: {},
				certificateNum: '',
				reportNum: "",
				code: '',
				cerCode: '',
				validPic: "",
				pdfUrl:"",
				showPdf:false
			}
		},
		onLoad(opt) {
			document.title = '方圆检测认证集团有限公司'
			if (opt.data) {
				this.reportNum = opt.data ? opt.data : ""
				this.getData()

			} else {
				// this.$refs.popup.open();
			}
		},
		mounted() {
			if (!this.certificateNum) {
				// this.$refs.popup.open();
			}

		},

		methods: {
			refreshPic(){
							
						this.$api.flushValidPic({certificateNum: encodeURIComponent(this.reportNum)}).then(res=>{
							console.log(res)
							this.validPic=res.data.validPic
						})
			},
			getData() {
				uni.showLoading({
					title: '查询中'
				})
				let vm = this
				this.$api.getCertQrBodyInfo({
					id: encodeURIComponent(this.reportNum)
				}).then(res => {
					console.log(res)
					if (res.code == 1000) {
						vm.dataInfo = res.data

						vm.validPic=res.data.validPic
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					uni.hideLoading()
				})

			},
			submit(){
				if(!this.cerCode) return this.$utils.msg('请输入证书验证码')
				if(!this.code) return this.$utils.msg('请输入图片验证码')
				let vm = this
				this.$api.verifyTruth({
					certificateNum: encodeURIComponent(this.reportNum),
					code:this.code,
					cerCode:this.cerCode
				}).then(res => {
					console.log(res)
					if (res.code == 1000) {
						// uni.navigateTo({
						// 	url:'/pages/webview/index?url='+res.data
						// })
						//window.open('http://119.45.17.38:8095/api/'+res.data)
						
						let apiUrl = 'http://119.45.17.38:8095/api/' + res.data;
						this.showPdf = true;
						this.pdfUrl = `/static/pdfjs/web/viewer.html?file=${encodeURIComponent(apiUrl)}`;

						/* uni.downloadFile({
						  url: 'http://119.45.17.38:8095/api/'+res.data,
						  success: (res) => {
						    uni.openDocument({
						      filePath: res.tempFilePath,
						      fileType: 'pdf',
						      success: function() {
						        console.log('打开文档成功');
						      }
						    });
						  }
						}); */
						
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
							
						setTimeout(()=>{
							this.refreshPic()
						},1000)
						
					}
					uni.hideLoading()
				})
			}
		}





	}
</script>
<style scoped lang="scss">
	.container {
		height: 100vh;
		background: linear-gradient(180deg, #4375f2, #fff);
		padding-top: 40rpx;
		overflow-y: scroll;
		padding-bottom: 40rpx;
	}

	.title {

		text-align: center;
		color: #fff;
		font-size: 40rpx;
		font-weight: 600;
		line-height: 40rpx;

		image {
			// width: 100rpx;

		}
	}

	.box {
		margin: 40rpx;
		background-color: #fff;
		padding-bottom: 30rpx;
		border-radius: 12rpx;

	}

	.tabs {
		// box-shadow: 0 30rpx 100rpx #bed0f3;

		view {
			flex: 1;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
		}

		.active {
			background: #4375f2;
			color: #fff;
			border-radius: 12rpx 12rpx 0 0;
		}
	}

	table {
		margin: 30rpx 30rpx 0;
	}

	td {
		height: 120rpx;
		font-size: 28rpx;
		width: 300rpx;
		padding: 30rpx;
		font-weight: 700;
		text-align: center;
		border-top: 1px solid #cad9fe;
		box-sizing: border-box;
		border-right: 1px solid #cad9fe
	}

	.t {
		width: 300rpx;
		background: #f7f9fe;
		border-left: 1px solid #cad9fe;
		text-align: center;
	}

	.contnet {
		color: #999;
		font-size: 30rpx;
		line-height: 40rpx;
	}

	.labelTitle {
		font-size: 32rpx;
		color: #000;
		margin-bottom: 20rpx;
		font-weight: 700;
	}

	.submit {
		width: 600rpx;
		height: 88rpx;
		background-color: #4375f2;
		text-align: center;
		color: #fff;
		line-height: 88rpx;
		border-radius: 88rpx;
		margin: 40rpx auto 20rpx;
	}

	.gzhCode {

		image {
			width: 300rpx;
			height: 300rpx;
			border-radius: 12rpx;
		}
	}
</style>